<template>
	<view>
		<view class="top">
			<view class="title">个人中心</view>
			<image src="../../static/images/ljh/YL.png" class="tx"></image>
			<view class="grxx">
				<text class="xm">张先生</text>
				<text class="sjhm">15890762905</text>
			</view>
			<view class="yhqkp">
				<view class="">
					我的优惠券
				</view>
				<view class="">
					3张
				</view>
			</view>
		</view>
		<uni-card title="我的订单" extra="全部订单 >" :thumbnail="avatar" @click="myorder_btn" style="margin-top: 100rpx;">
			<view class="dd">
				<view class="ddimg1">
					待支付
				</view>
				<view class="ddimg2">
					待支付
				</view>
				<view class="ddimg3">
					待支付
				</view>
			</view>
		</uni-card>
		<uni-card title="我的服务" :thumbnail="avatar" @click="onClick">
			<view class="wdfw">
				<view class="fw">
					<image @click="coupon_btn" src="../../static/images/ljh/fw1.png"></image>
					<view>领券中心</view>
				</view>
				<view class="fw">
					<image src="../../static/images/ljh/fw2.png"></image>
					<view>邀请好友</view>
				</view>
				<view class="fw">
					<image @click="vehicle_btn" src="../../static/images/ljh/fw3.png"></image>
					<view>我的车辆</view>
				</view>
				<view class="fw">
					<image @click="consume_btn" src="../../static/images/ljh/fw4.png"></image>
					<view>消费记录</view>
				</view>
				<view class="fw">
					<image @click="maintain_btn" src="../../static/images/ljh/fw5.png"></image>
					<view>我的维修</view>
				</view>
				<view class="fw">
					<image src="../../static/images/ljh/fw6.png"></image>
					<view>意见反馈</view>
				</view>
				<view class="fw">
					<image src="../../static/images/ljh/fw7.png"></image>
					<view>收货地址</view>
				</view>
			</view>
		</uni-card>
		<u-button type="primary" text="退出登录" class="tcdl" @click="signOut_btn"></u-button>


	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			myorder_btn() {
				uni.$u.route('/pages/wpc/myorder/myorder')
			},
			coupon_btn() {
				uni.$u.route('/pages/ryx/Coupon_Center/Coupon_Center')
			},
			vehicle_btn() {
				uni.$u.route('/pages/ly/vehicle/vehicle')
			},
			consume_btn() {
				uni.$u.route('/pages/ly/consume/consume')
			},
			maintain_btn() {
				uni.$u.route('/pages/ryx/Maintain/Maintain')
			},
			signOut_btn() {
				uni.$u.route('/pages/ljh/Login/Login')
			}
		}
	}
</script>

<style>
	.tcdl {
		width: 80%;
		border-radius: 10rpx;
		margin-bottom: 40rpx;
	}

	.wdfw {
		display: flex;
		flex-wrap: wrap;
		/* justify-content: space-between; */
	}

	.fw {
		width: 100rpx;
		height: 100rpx;
		margin-left: 40rpx;
		margin-top: 40rpx;
		margin-bottom: 20rpx;
		font-size: 18rpx;
		text-align: center;
		font-weight: bold;
	}

	.fw image {
		width: 78rpx;
		height: 60rpx;
	}

	.dd {
		display: flex;
		justify-content: space-between;
	}

	.ddimg1 {
		width: 180rpx;
		height: 100rpx;
		background-image: url(@/static/images/ljh/zu1.png);
		text-align: center;
		line-height: 100rpx;
		color: white;
	}

	.ddimg2 {
		width: 180rpx;
		height: 100rpx;
		background-image: url(@/static/images/ljh/zu2.png);
		text-align: center;
		line-height: 100rpx;
		color: white;
	}

	.ddimg3 {
		width: 180rpx;
		height: 100rpx;
		background-image: url(@/static/images/ljh/zu3.png);
		text-align: center;
		line-height: 100rpx;
		color: white;
	}

	.yhqkp {
		background-color: white;
		width: 92%;
		margin-left: 4%;
		border-radius: 15rpx;
		margin-top: 50rpx;
		display: flex;
		justify-content: space-around;
		height: 120rpx;
		align-items: center;
		box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	}

	.top {
		width: 100%;
		height: 450rpx;
		background-image: url(@/static/images/ljh/tc1.png);
	}

	.title {
		width: 100%;
		color: white;
		text-align: center;
		padding: 30rpx 0rpx;
		font-size: 35rpx;
	}

	.tx {
		border-radius: 50%;
		width: 150rpx;
		height: 150rpx;
		display: block;
		/* 将图片转换为块级元素 */
		margin: 20rpx auto;
		/* 应用自动外边距以在水平方向上居中 */
	}

	.grxx {
		text-align: center;
	}

	.xm {

		color: white;

	}

	.sjhm {
		color: white;
		font-size: 25rpx;
		font-weight: 25rpx;
		margin-left: 20rpx;
	}
</style>